<template>
  <div :data-id="data.id"></div>
</template>

<script lang="ts" setup>
interface IProps {
  data: any;
}
const { cimInstance } = window;
const mounted = ref(false);
const props = withDefaults(defineProps<IProps>(), { data: { id: '' } });

const render = () => {
  try {
    const { data, ...restData } = props.data;
    // const layerData = {
    //   ...restData,
    //   ...data,
    //   type: 'fake_particleSystem',
    //   name: restData.id,
    //   layerName: restData.id,
    // };
    const components = data?.json?.components?.map((x: any) => {
      return {
        ...x,
        longitude: data?.position?.[0],
        latitude: data?.position?.[1],
        height: data?.position?.[2],
      };
    });

    const config = cimInstance.api.createGroupParticleConfig(components);
    if (mounted.value) {
      // cimInstance.api.updateLayerParams(layerData.id, { params: layerData });
    } else {
      cimInstance.entityApi.addEntity(config);
      mounted.value = true;
      // nextTick(() => {
      //   stageStore.layerLoadedIdList.push(restData.id);
      // });
    }
  } catch (error) {
    console.log(error);
  }
};

watch(props.data, render, { deep: true, immediate: true });

onUnmounted(() => {
  cimInstance.api.destroyLayer(props.data.id);
});
</script>

<style lang="less" scoped></style>
